<template>
  <div>
    <!-- 底部边注栏 -->
    <div id="sidebarBox">
      <ul>
        <!-- 二维码 -->
        <li class="label app"
            @mouseover="mouserOver"
            @mouseleave="mouseLeave">
          <div class="siderImg"
               ref="siderimg"></div>
        </li>
        <!-- 联系客服 -->
        <li class="label chat"
            @click="chatShow"></li>
        <!-- 我要吐槽 -->
        <li class="label complaint" @click="feedback"></li>
        <!-- @click="feedback" 点击事件 -->
        <!-- 返回顶部 -->
        <li class="label back_top"
            ref="top"
            @click="backtop"></li>
      </ul>

    </div>

    <FrontChat v-if="getFrontChatShow" />

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import FrontChat from 'components/common/chat/FrontChat'

export default {
  data() {
    return {
      isChatShow: false
    }
  },
  mounted() {
    // 注册页面滚动事件
    document.addEventListener('scroll', this.Scroll, true)
  },
  methods: {
    // 鼠标移入
    mouserOver() {
      const imgOver = this.$refs.siderimg
      imgOver.style.display = 'block'
    },
    // 鼠标移出
    mouseLeave() {
      const imgLeave = this.$refs.siderimg
      imgLeave.style.display = 'none'
    },
    // 回到顶部
    backtop() {
      const that = this
      let timer = setInterval(() => {
        //获取到当前页面距离顶部的距离
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop
        // 计算每次向上移动的距离（负的滚动距离/5）
        let ispeed = Math.floor(-osTop / 5)
        // 用当前距离+计算出的距离，将结果再赋值当前距离
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed
        // 当前距离为0时，即已回到顶部，清除计时器
        if (osTop == 0) {
          clearInterval(timer)
        }
      }, 30)
    },
    // 绑定滚动事件
    Scroll() {


      const back = this.$refs.top //获取返回顶部
      if (window.pageYOffset > 1360) {
        //当第一个导航框到达一定距离
        if (back) {
          back.style.display = 'block' //显示返回顶部
        }
      } else {
        if (back) {
          back.style.display = 'none' //隐藏返回顶部
        }
      }
    },
    // 点击进入反馈页面
    feedback(){
      this.$router.push('/front/Complaint');
    },
    chatShow() {
      if (!this.getIsLogin) {
        return this.$Notice.warning({
          title: '提示',
          desc: '请先进行登录'
        })
      }
      this.$store.commit('frontChatShowing', {
        show: true,
        nowMen: {
          uid: -9999,
          head: null,
          nickname: '平台客服'
        }
      })
    }
  },
  computed: {
    ...mapGetters(['getFrontChatShow', 'getIsLogin'])
  },
  components: {
    FrontChat
  }
}
</script>

<style scoped>
  #sidebarBox{
    /* border: 1px solid black; */
    width: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
  }
  .label{
    /* border: 1px solid black; */
    width: 40px;
    height: 40px;
    border-radius: 3px;
    margin-top: 5px;
    transition: all 0.4s;
    
  }
  .app{
    background: url('https://static.360buyimg.com/finance/base/1.2.0/css/i/sidebar.gif?20180130');
    background-position-x: -168px;
  }
  .app:hover{
    background-position-y: -40px;
    cursor: pointer;
  }
  .chat{
    background: url('https://static.360buyimg.com/finance/base/1.2.0/css/i/sidebar.gif?20180130');
    background-position-x: -252px;
  }
  .chat:hover{
    background-position-y: -40px;
    cursor: pointer;
  }
  .complaint{
    background: url('https://static.360buyimg.com/finance/base/1.2.0/css/i/sidebar.gif?20180130');
  }
  .complaint:hover{
    background-position-y: -40px;
    cursor: pointer;
  }
  .back_top{
    background: url('https://static.360buyimg.com/finance/base/1.2.0/css/i/sidebar.gif?20180130');
    background-position-x: -42px;
    display: none;
  }
  .back_top:hover{
    background-position-y: -40px;
    cursor: pointer;
  }
  .siderImg{
    /* border: 1px solid black; */
    position: absolute;
    z-index: 5;
    width: 120px;
    height: 120px;
    left: -125px;
    top: 5px;
    padding: 5px;
    /* background-color: white; */
    background-image: url(https://static.360buyimg.com/finance/base/1.2.0/css/sprite/base.png?20150109);
    background-position-x: -10px;
    background-position-y: -79px;
    display: none;
    transition: all 0.4s;
  }
  
  
  
</style>
  
